import React, { useState, useEffect } from 'react'
import './css/guanyan.scss'
import IconFont from './Tubiao';
import { useNavigate } from 'react-router-dom';
import { Sticky, Cell } from 'react-vant';
import axios from './Axios';
export default function Guanyan() {
    const navigate = useNavigate()
    const [list,setlist] = useState([])
    const getguanyan = async () => {
        let { data } = await axios.get('/getguan')
        console.log(data);
        setlist(data.list)

    }
    useEffect(() => {
        getguanyan()
    }, [])

    return (
        <div className='div'>
            <Sticky>
                <div className='top'>
                    <span className='icon' onClick={() => (navigate('/app/my'))}>
                        <IconFont name='icon-arrowLeft'></IconFont>
                    </span>
                    <span>观演人</span>
                </div>
            </Sticky>
            <div className='people'>
                {list.map((item, idx) => (
                    <Cell
                        center
                        key={idx}
                        title={item.name}
                        label={`身份证:${item.sno}`}
                        isLink
                        className='peoplecontent'
                        onClick={() => (navigate('/upguan', { state: { item: item } }))}
                    />
                ))}
            </div>

            <div className='ddd'>
                <Sticky>
                    <span onClick={() => (navigate('/addguan'))}>新建观演人</span>
                </Sticky>
            </div>
        </div>

    )
}
